
$color:#ccc;
$height:100 + 500;
$width:400px;
$background:red;

// .box{
// 	width: 400px;
// 	height: 200px;
// 	background-color: red;
// 	border:1px solid pink;
// }
.box{
	color:$color;
	height: $height;
	width: $width;
	background-color: $background;
	$hihi:123321 !global;
	.inner{
		height: $height/2;
		width: $width/2;
		background-color: azure;
		&:hover{
			background-color: rebeccapurple;
		}
	}
}
.box::before{
	content: '234234234';
}
$res:'正确';
$box:box;
/**
 * box:#{$box}
 */
.#{$box}{
	@extend .box;
	@if(res!='正确'){
		background-color: black;
	}@else{
		background-color: blue;
	}
}
@for $var from 3 to 4 {
	.box#{$var}{
		color:red;
	}
}

@for $var from 3 through 4 {
	.box#{$var}{
		color:red;
	}
}
$list:1 8 9 6 5;
@each $var in $list {
	$index:index($list,$var);
	.each#{$var}{
		color:pink;
	}
}
$while:5;
@while $while>0 {
	$while:$while - 1;
	.while#{$while}{
		color:red;
	}
}
@import "_common.scss";
.#{$lzysz}{
	color:red;
}

@mixin show($color) {
	.mixin{
		color:$color;
	}
}
@include show(yellow);
